<template>
    <div class="grid grid-cols-2 md:grid-cols-3  gap-4 " :class="{
        'lg:grid-cols-4': type === 'checkbox' || type === 'radio',
    }">
        <div v-for="(item, index) in products" :key="index"
            class="overflow-hidden relative group cursor-pointer border! border-[#000]! border-solid! border-[1px]! rounded-lg">
            <div class="absolute top-0 left-0 w-full h-full bg-white z-9 flex flex-col" v-if="showindex === index">
                <div class="text-[14px] text-center mt-2 mb-1 text-[#000]">
                    50%-Mostly text
                </div>
                <div class="flex-1 h-0 text-12px p-1 text-gray-500 overflow-auto">
                    With 50% Embroidery, yourdesign is stitched onto a twillbacking, covering 509 or less ofits
                    surface.ldeal for text-baseddesigns
                </div>
                <div class="flex items-center justify-between px-2 py-1">
                </div>
            </div>
            <span v-if="type === 'checkbox'"
                class="z-1 absolute top--7 right--7 transform bg-[#000]! w-12 h-12 rotate-45">
                <Icons name="icon-selected"
                    class=" absolute bottom-[2px] right-4 text-[12px]! w-[12px] h-[12px] rotate--45 text-white!" />
            </span>
            <img src="/testImgs/icon/50-percent.png" class="absolute top-[1px] right-[1px] w-10 h-10 object-cover"
                alt="折扣标签" v-if="type === 'radio'" />
            <!-- 缩略图 -->
            <div class="overflow-hidden rounded-lg cursor-pointer bg-white pb-2" @click="onImageClick(index)">
                <img :src="item.imageUrl" alt="产品图片" v-img-auto>
                <div class="text-center text-sm text-gray-500 px-4 mt-2">
                    {{ item.name }}
                </div>
                <div
                    class="text-center text-sm font-medium text-gray-800 px-2 mt-1 flex items-center justify-between relative z-10">
                    <div>
                        <Icons name="icon-tips1" class="text-gray-500!" @click="hangClick(index)" />
                    </div>
                    <div>
                        {{ item.price }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
import { Icons } from '../icons';
const showindex = ref(null)
// 定义组件props
const props = withDefaults(defineProps<{
    type?: 'radio' | 'checkbox'
    products: Array<{
        id: string | number;
        name: string;
        price: string;
        imageUrl: string;
        discount?: boolean;
    }>;
}>(), {
    products: () => [],
    type: 'radio'
})

// 定义事件
const emit = defineEmits<{
    (e: 'imageClick', index: number): void;
}>()

// 处理图片点击事件
const onImageClick = (index: number) => {
    emit('imageClick', index);
}

const hangClick = (index: number) => {
    if (index === showindex.value) {
        showindex.value = null
    } else {
        showindex.value = index
    }
}
</script>